<template>
	<view>
		<!--pagesA/searchresult/searchresult.wxml-->
		<view class="searchresult">
			<view class="container_top">
				<view class="search">
					<u-search
						v-model="value"
						shape="round"
						bgColor="#fff"
						placeholder="请输入搜索关键词"
						use-right-icon-slot
						@custom="onSearch"
					>
						<view class="right-icon z-font-22 z-flex" slot="right-icon" @tap="onSearch">搜索</view>
					</u-search>
				</view>
				<view class="z-flex-x-s-a z-padding-24">
					<view class="screen z-flex z-flex-1" :class="is_price === '' && is_rank === '' ? 'active' : ''"  @tap="rankTap(1)">
						<view class="screen-word z-font-24">综合排序</view>
					</view>
					<view class="screen z-flex z-flex-1" :class="is_rank=== 1 ? 'active' : ''" @tap="rankTap(2)">
						<view class="screen-word z-font-24">销量</view>
					</view>
					<view class="screen z-flex z-flex-1" :class="is_price !== '' ? 'active' : ''" @tap="rankTap(3)">
						<view class="screen-word z-font-24 z-margin-r-8">价格</view>
						<image src="../../static/service/norank.png" class="rank-icon" v-if="is_price === ''" mode="widthFix"></image>
						<image src="../../static/service/down.png" class="rank-icon" v-else-if="is_price === 1" mode="widthFix"></image>
						<image src="../../static/service/top.png" class="rank-icon" v-else-if="is_price === 2" mode="widthFix"></image>
					</view>
					<view class="z-flex z-flex-1">
						<image src="/static/index/row.png" class="icons" v-if="shape == 2" @tap="listChange(1)"></image>
						<image src="/static/index/column.png" class="icons" v-else @tap="listChange(2)"></image>
					</view>
				</view>
			</view>
			<view class="main-box">
				<scroll-view :scroll-y="true" class="scroll z-padding-32" @scrolltolower="lowerthreshold">
					<view :class="shape == 1 ? 'service-box' : ''">
						<block v-for="(item,index) in list">
							<service :info="item" :type="shape" @serviceTap="serviceTap"></service>
						</block>
					</view>
					<!-- <van-empty description="暂无项目" v-if="{{finish && list.length === 0}}" /> -->
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import service from "@/component/service.vue"
export default {
	components: {
		service
	},
	data() {
		return {
			value: '',
			list: [],
			finish: false,
			loading: false,
			page: 1,
			type: 1,
			is_price: '',
			is_rank: '',
			address:uni.getStorageSync('address'),
			shape: 2
		};
	},
	onLoad(options) {
		if (options) {
			console.log(options,'???!')
			this.value = options.value,
			this.type = options.type
		}
	},
	onShow() {
		this.reload();
	},
	methods: {
		listChange(e) {
			let index = e;
			this.shape = index
		},
		rankTap(e) {
			let index = e;
			if (index == 1) {
				this.is_price = '',
				this.is_rank = ''
			} else if (index == 2) {
				this.is_price = '',
				this.is_rank = 1
			} else if (index == 3) {
				if (this.is_price === '') {
					this.is_price = 1,
					this.is_rank = ''
				} else if (this.is_price === 1) {
					this.is_price = 2,
					this.is_rank = ''
				} else if (this.is_price === 2) {
					this.is_price = 1,
					this.is_rank = ''
				}
			}
			this.reload();
		},
		serviceTap(e) {
			this.util.skip('/service/servedetail/servedetail?id=' + e.detail.id);
		},
		onChange(e) {
			this.value = e.detail
		},
		onSearch() {
			if (this.value === '') return this.util.toast('请输入搜索内容');
			let history = uni.getStorageSync('keyword' + this.type) || [];
			let index = history.indexOf(this.value);
			if (index !== -1) {
				history.splice(index, 1);
			}
			history.unshift(this.value);
			uni.setStorageSync('keyword' + this.type, history);
			this.reload();
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			http.get('goods/getlist', {
				page: this.page,
				name: this.value,
				is_rank: this.is_rank,
				is_price: this.is_price,
				city: this.address.city
			})
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		},
		lowerthreshold() {
			console.log('我到底了');
		},
		todetail() {
			uni.navigateTo({
				url: '/service/servedetail/servedetail'
			});
		}
	}
};
</script>

<style>
/* pagesA/searchresult/searchresult.wxss */
.searchresult {
	background-color: #edf1f4;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.container_top {
	background-color: #fff;
	flex-shrink: 0;
}

.screen-box {
}
.rank-icon {
	width: 12rpx;
}
.screen-word {
	color: #a4a9b7;
}
.active .screen-word {
	color: #1c274c;
}
.main-box {
	flex: 1;
	overflow: hidden;
}
.search {
	width: 95vw;
	margin: 0 auto;
	box-sizing: border-box;
}
.right-icon {
	color: #fff;
	background-color: #62cb81;
	border-radius: 40rpx;
	width: 90rpx;
	height: 58rpx;
}
.van-cell__left-icon-wrap {
	margin-top: 8rpx;
}
.van-dropdown-menu {
	box-shadow: var(--dropdown-menu-box-shadow, 0 0px 0px rgba(0, 0, 0, 0)) !important;
}
.scroll {
	height: 100%;
	box-sizing: border-box;
}

.service-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.icons {
	width: 32rpx;
	height: 32rpx;
}
</style>
